<template>
    <h2>采购单列表</h2>
    <el-table :data="buyList" style="width: 100%">
        <el-table-column prop="storeName" label="仓库名称" />
        <el-table-column prop="itemName" label="商品名称" />
        <el-table-column prop="buyNum" label="预计采购数量" />
        <el-table-column prop="factBuyNum" label="实际采购数量" />
        <el-table-column prop="buyUser" label="采购人" />
        <el-table-column prop="buyTime" label="采购时间" width="200px" />
        <el-table-column prop="phone" label="采购人电话" />
        <el-table-column prop="isIn" label="状态">
            <template #default="scope">
                <span v-if="scope.row.isIn == 0" style="color:green">未入库</span>
                <span v-else style="color:red">已入库</span>
            </template>
        </el-table-column>

        <el-table-column fixed="right" label="操作" width="240">
            <template #default="scope">
                <el-button size="small" type="primary" v-if="scope.row.factBuyNum == 0"
                    @click="showBuyListDialog(scope.row)">修改</el-button>
                <el-button size="small" type="danger" v-if="scope.row.factBuyNum == 0"
                    @click="delBuyList(scope.row.buyId)">删除</el-button>
                <el-button size="small" type="primary" v-if="scope.row.isIn == 0"
                    @click="doInStore(scope.row)">生成入库单</el-button>

            </template>
        </el-table-column>
    </el-table>

    <el-pagination layout="prev, pager, next" :total="total" @current-change="queryBuyList"
        v-model:current-page="currentPage" />

    <el-dialog v-model="buyListDialog" width="60%" title="商品采购">

        <el-form :model="buyForm" label-width="120px">
            <el-form-item label="商品名称">
                {{ buyForm.itemName }}
            </el-form-item>
            <el-form-item label="仓库">
                {{ buyForm.storeName }}
            </el-form-item>
            <el-form-item label="供应商">
                {{ buyForm.supplyName }}
            </el-form-item>
            <el-form-item label="产地">
                {{ buyForm.placeName }}
            </el-form-item>
            <el-form-item label="预计采购量">
                <el-input v-model="buyForm.buyNum" style="width: 80%" />
            </el-form-item>
            <el-form-item label="采购人">
                <el-input v-model="buyForm.buyUser" style="width: 80%" />
            </el-form-item>

            <el-form-item label="采购人电话">
                <el-input v-model="buyForm.phone" style="width: 80%" />
            </el-form-item>
            <el-form-item label="实际采购数">
                <el-input v-model="buyForm.factBuyNum" style="width: 80%" />
            </el-form-item>

        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="buyListDialog = false">取消</el-button>
                <el-button type="primary" @click="updateBuyOrder">
                    保存
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup>
import axios from 'axios';
import { ElMessage } from 'element-plus';
import { onMounted, reactive, ref } from 'vue';

const total = ref()
const currentPage = ref(1)

function delBuyList(id) {
    axios.get("http://localhost:8081/deleteBuyList/" + id)
        .then((response) => {
            if (response.data.code == 200) {
                //刷新列表
                queryBuyList(1);
            }
            ElMessage(response.data.msg);

        })
        .catch((ex) => {
            console.log(ex);
        });
}

function doInStore(row) {
    axios.post("http://localhost:8081/buyInStore", row)
        .then((resp) => {
            if (resp.data.code == 200) {
                //刷新列表
                queryBuyList(currentPage.value);
                ElMessage.success(resp.data.msg);
            } else {
                ElMessage.error(resp.data.msg);
            }
        })
        .catch((ex) => {
            console.log(ex);
        });
}

function updateBuyOrder() {
    axios.post("http://localhost:8081/updateBuyList", buyForm)
        .then((resp) => {
            if (resp.data.code == 200) {
                buyListDialog.value = false;
                //刷新列表
                queryBuyList(currentPage.value);
                ElMessage.success(resp.data.msg);
            } else {
                ElMessage.error(resp.data.msg);
            }
        })
        .catch((error) => {
            console.log(error);
        })
}

function showBuyListDialog(row) {
    var productId = row.productId;
    buyListDialog.value = true;
    axios.get("http://localhost:8081/buyAutoInfo/" + productId)
        .then((resp) => {
            //获得响应数据对象
            var item = resp.data;
            //将响应数据赋值给buyForm表单
            buyForm.buyId = row.buyId;
            buyForm.productId = item.id;
            buyForm.itemName = item.itemName;
            buyForm.storeId = item.storeId;
            buyForm.storeName = item.storeName;
            buyForm.supplyId = item.supplyId;
            buyForm.supplyName = item.supplyName;
            buyForm.placeId = item.placeId;
            buyForm.placeName = item.placeName;
            buyForm.buyUser = row.buyUser;
            buyForm.buyNum = row.buyNum;
            buyForm.factBuyNum = row.factBuyNum;
            buyForm.phone = row.phone;

        })
        .catch((error) => {
            console.log(error);
        });
}


const buyForm = reactive({
    productId: '',
    storeId: '',
    supplyId: '',
    placeId: '',
    itemName: '',
    storeName: '',
    supplyName: '',
    placeName: '',
    buyNum: '',
    buyUser: '',
    phone: '',
    factBuyNum: ''
})

const buyListDialog = ref(false)

const buyList = ref([])
function queryBuyList(pageNum) {
    axios.get("http://localhost:8081/queryBuyList?pageNum=" + pageNum)
        .then((response) => {
            buyList.value = response.data.buyLists;
        })
}

onMounted(() => {
    queryBuyList(1)
})
</script>

<style scoped></style>